<!DOCTYPE html>
<html>
<html xmlns:th="http://www.thymeleaf.org">
<head>

  <!-- meta tags -->
  <meta charset="utf-8">
  <meta name="keywords" content="bootstrap 4, premium, multipurpose, ecommerce, html5, CSS"/>
  <meta name="description" content="Bootstrap 4 Landing Page Template"/>
  <meta name="author" content="www.themesground.com"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Title -->
  <title>佩奇牧场-商品</title>
  <!-- Favicon Icon -->
  <link rel="shortcut icon" href="../assets/images/pagepig.ico"/>

  <!-- inject css start -->

  <link href="../assets/css/theme-plugin.css" rel="stylesheet"/>
  <link href="../assets/css/theme.min.css" rel="stylesheet"/>
  <!-- inject css end -->

</head>

<body>
<!-- 引入head代码 -->
<div class="head"></div>
<!-- page wrapper start -->

<div class="page-wrapper">

  <!-- preloader start -->

  <div id="ht-preloader">
    <div class="loader clear-loader"><img class="img-fluid" src="../assets/images/loader.gif" alt=""></div>
  </div>

  <!-- preloader end -->

  <section class="bg-light py-4">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-md-6">
          <h1 class="h2 mb-0">商品详情</h1>
        </div>
        <div class="col-md-6 mt-3 mt-md-0">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb justify-content-md-end bg-transparent p-0 m-0">
              <li class="breadcrumb-item"><a class="link-title" href="http://127.0.0.1:8888/page/index.html">主页</a></li>
              <li class="breadcrumb-item"><a class="link-title" href="http://127.0.0.1:8888/page/shopping-cart.html">购物车</a></li>
              <li class="breadcrumb-item active text-primary" aria-current="page">商品详情</li>
            </ol>
          </nav>
        </div>
      </div>
    </div>
  </section>


  <div class="page-content">
    <section>
      <div class="container">
        <div class="row">
          <div class="col-lg-6 col-12">
            <ul id="imageGallery">
              <li th:if="${img.get('img0') != null}" th:attr="data-thumb=${img.get('img0')},data-src=${img.get('img0')}">
                <img class="img-fluid w-100" id="itemImg" th:value="${img.get('img0')}"  th:src="${img.get('img0')}" alt=""/>
              </li>
              <li th:if="${img.get('img1') != null}"  th:attr="data-thumb=${img.get('img1')},data-src=${img.get('img1')}">
                <img class="img-fluid w-100" th:src="${img.get('img1')}" alt=""/>
              </li>
              <li th:if="${img.get('img2') != null}" th:attr="data-thumb=${img.get('img2')},data-src=${img.get('img2')}">
                <img class="img-fluid w-100" th:src="${img.get('img2')}" alt=""/>
              </li>
            </ul>
          </div>
          <div class="col-lg-6 col-12 mt-5 mt-lg-0">
            <div class="product-details">
              <h1 class="h4 mb-0 font-w-6 title" id="title" th:text="${map.get('title')}">商品名字</h1>
              <input type="hidden" id="hiddenId" th:value="${map.get('id')}" >
              <div class="star-rating mb-4"><i class="las la-star"></i><i class="las la-star"></i><i
                      class="las la-star"></i><i class="las la-star"></i><i class="las la-star"></i>
              </div>
              <span class="product-price h5 text-pink " id="itemPrice" th:value="${map.get('price')}" th:text="${map.get('price')}"></span>
              <ul class="list-unstyled my-3">
                <li><small>库存：<span class="text-green" id="num" th:value="${map.get('num')}" th:text="${map.get('num')}"> </span> </small>
                </li>
                <li class="font-w-4"><small>类型：<span class="text-muted variety"
                                                     th:text="${map.get('categoryName')}"></span></small>
                </li>
              </ul>
              <div class="d-sm-flex align-items-center mb-5">
                <div class="d-flex align-items-center mr-sm-4">
                  <button class="btn-product btn-product-up"><i class="las la-minus"></i>
                  </button>
                  <!--这里是选择的商品个数-->
                  <input class="form-product" type="number" id="itemNumTest" name="form-product"  value="1">
                  <button class="btn-product btn-product-down"><i class="las la-plus"></i>
                  </button>
                </div>
              </div>
            </div>
            <div class="d-sm-flex align-items-center mt-5">
              <button class="btn btn-primary btn-animated mr-sm-3 mb-3 mb-sm-0" onclick="addCart()"><i
                      class="las la-shopping-cart mr-2"></i>添加购物车
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="pt-0 pb-8">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="tab product-tab">
              <nav>
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                  <a class="nav-item nav-link active ml-0" id="nav-tab1" data-toggle="tab" href="#tab3-1" role="tab"
                     aria-selected="true">商品详细介绍</a>
                  <a class="nav-item nav-link" id="nav-tab2" data-toggle="tab" href="#tab3-2" role="tab"
                     aria-selected="false">商品详情</a>
                </div>
              </nav>
              <div class="tab-content pt-5 p-0">
                <div role="tabpanel" class="tab-pane fade show active" id="tab3-1">
                  <div class="row align-items-center">
                    <!--商品详细介绍-->
                    <div class="col-md-12" id="des">
                      <p th:text="${map.get('des')}"></p>
                    </div>
                  </div>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="tab3-2">
                  <table class="table table-bordered mb-0">
                    <tbody>
                    <tr>
                      <td>商品名称</td>
                      <td class="title" th:text="${map.get('title')}"></td>
                    </tr>
                    <tr>
                      <td>商品编号</td>
                      <td id="id" th:text="${map.get('id')}"></td>
                    </tr>
                    <tr>
                      <td>商品毛重</td>
                      <td id="weight" th:text="${map.get('weight')}+g"></td>
                    </tr>
                    <tr>
                      <td>商品产地</td>
                      <td id="origin" th:text="${map.get('origin')}"></td>
                    </tr>
                    <tr>
                      <td>品种</td>
                      <td class="variety" th:text="${map.get('variety')}"></td>
                    </tr>
                    <tr>
                      <td>类别</td>
                      <td id="categoryName" th:text="${map.get('categoryName')}"></td>
                    </tr>
                    <tr>
                      <td>保质期</td>
                      <td id="storage" th:text="${map.get('storage')}"></td>
                    </tr>
                    <tr>
                      <td>储存条件</td>
                      <td id="storageFactor" th:text="${map.get('storageFactor')}"></td>
                    </tr>
                    </tbody>
                  </table>
                </div>

                <div class="comment-area mt-5">
                  <div class="content_title">
                    <h4>评论</h4>
                  </div>
                  <!--评论显示的位置-->
                  <ul class="list_none comment_list" id="commentUl">
                    <p th:if="${#lists.isEmpty(comment.data.records)}">目前没有评论！</p>
                    <li class="comment_info" th:if="not ${#lists.isEmpty(comment.data.records)}" th:each="comm:${comment.data.records}" >
                      <div class="d-flex">
                        <div class="comment_user">
                          <img src="../assets/images/thumbnail/member1.png" alt="user2">
                        </div>
                        <div class="comment_content">
                          <div class="d-flex">
                            <div class="meta_data">
                              <h6>
                                <a href="#" th:text="${comm.username}"></a>
                              </h6>
                              <div class="comment-time" th:text="${#dates.format(comm.createdTime,'yyyy-MM-dd HH:mm')}"></div>
                            </div>
                          </div>
                          <p th:text="${comm.comm}"></p>
                        </div>
                      </div>
                    </li>
                  </ul>
                  <div class="mt-8 bg-light-4 rounded p-5">
                    <div class="section-title mb-3">
                      <h4>添加评论</h4>
                    </div>
                    <div id="contact-form" class="row">
                      <div class="form-group col-12">
                        <textarea id="form_message" name="message" class="form-control" placeholder="请让我知道您的反馈"
                                  rows="4"></textarea>
                        <div class="help-block with-errors" id="errorMSG"></div>
                      </div>
                      <div class="col-12">
                        <button class="btn btn-primary btn-animated mt-1" onclick="insertComment()">填写评论</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <div class="scroll-top"><a class="smoothscroll" href="#top"><i class="las la-angle-up"></i></a></div>
<!-- 引入footer代码-->
  <div class="footer"></div>

  <script src="../assets/js/jquery-3.5.1.min.js"></script>
  <script src="../assets/js/popper.min.js"></script>
  <script src="../assets/js/bootstrap.min.js"></script>
<!--  <script src="../assets/js/owl.carousel.min.js"></script>-->
  <script src="../assets/js/light-slider.js"></script>
  <script src="../assets/js/parallax.js"></script>
  <script src="../assets/js/magnific-popup.min.js"></script>
  <script src="../assets/js/jquery.countdown.min.js"></script>
  <script src="../assets/js/jquery.dd.min.js"></script>
  <script src="../assets/js/validator.js"></script>
  <script src="../assets/js/wow.js"></script>
  <script src="../assets/js/theme-script.js"></script>
</div>
<script>

  //添加评论js
  function insertComment() {
    let comm = $("#form_message").val();
    if (comm === undefined || comm === "") {
      alert("请填写评论！");
      return
    }
    let id = $("#id").html();
    $.ajax({
      url: "/goods/doSaveComment",
      type: "POST",
      data: {
        "goodsId": id,
        "comm": comm,
        "username": ""
      },
      success: (result) => {
        //请求状态码不为201则表示请求成功
        if (result.status !== 201) {
          $("#form_message").empty();
          alert(result.msg);
          window.location.reload();
        } else {
          alert(result.msg);
        }
      }
    })
  }

  function addCart(){
    let itemId =document.getElementById("hiddenId").getAttribute("value");
    let itemNum =document.getElementById("itemNumTest").getAttribute("value");
    let title=$(".title").html();
    let itemPrice0=document.getElementById("itemPrice").getAttribute("value");
    let itemPrice=(itemPrice0*100).toFixed(0);
    let itemImg =document.getElementById("itemImg").getAttribute("value");
   $.ajax({
      url:"/page/addCartByUserName",
      type:"get",
      data:{itemId:itemId,num:itemNum,itemPrice:itemPrice,itemTitle:title,itemImage:itemImg},
      contentType:"application/x-www-form-urlencoded; charset=utf-8",
      dataType:"json",
      success:function (data){
       if (data.status==200){ alert("添加购物车成功");}
       else{
         alert(data.msg);
         window.location.href = '/page/login.html';
       }
      }
    })
  }
  $('.btn-product-up').on('click', function (e) {
    e.preventDefault();
    var numProduct = Number($(this).next().val());
    if (numProduct > 1) $(this).next().val(numProduct - 1);
  });
  $('.btn-product-down').on('click', function (e) {
    e.preventDefault();
    var numProduct = Number($(this).prev().val());
    $(this).prev().val(numProduct + 1);
  });
</script>
<script type="text/javascript">
  //在js中引入head和footer
  $(document).ready(function () {
    $('.head').load('/page/head.html');
    $('.footer').load('/page/footer.html');

    $('#imageGallery').lightSlider({
      gallery:true,
      item:1,
      verticalHeight:450,
      thumbItem:3,
      slideMargin:0,
      speed:600,
      autoplay: true
    });
  });
</script>
</body>
</html>
</html>